<template>
    <el-row v-loading="loading">
        <el-col :span="13">
            <div class="grid-content bg-purple">
                <img src="../../assets/logo.png">
            </div>
        </el-col>
        <el-col :span="11">
            <div class="grid-content bg-purple-light">
                <h1>后台管理系统</h1>
                <p>Login with your account</p>
                <el-form ref="form" :model="form" :rules="rules" class="demo-ruleForm">
                    <el-form-item prop="userName">
                        <el-input v-model="form.userName" class="input" placeholder="请输入账号" prefix-icon="el-icon-user" type="text"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.password" class="input" placeholder="请输入密码" prefix-icon="el-icon-unlock" type="password">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="key">
                        <el-select v-model="form.key" placeholder="请选择您的身份">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn" type="primary" @click="onSubmit">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    import {getUserData, getDoctorData, changeState} from '../../request/api/login/login.js'

    export default {
        name: 'Login',
        components: {},
        data() {
            return {
                value: '',
				id: '',
                options: [
                    {
                        value: '0',
                        label: '管理员'
                    }, 
                    {
                        value: '1',
                        label: '医师'
                    }
                ],
                form: {
                    key: '',
                    userName: '',
                    password: ''
                },
                rules: {
                    userName: [{
                            required: true,
                            message: '请输入账号',
                            trigger: 'blur'
                        },
                        {
                            min: 2,
                            max: 8,
                            message: '长度在 2 到 8 个字符',
                            trigger: 'blur'
                        }
                    ],
                    password: [{
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur'
                        },
                        {
                            min: 6,
                            message: '密码长度至少 6 个字符',
                            trigger: 'blur'
                        }
                    ],
                },
                loading: false
            }
        },
        methods: {
            onSubmit() {
                this.loading = true
                this.$refs["form"].validate((isPass) => {
                    if (isPass) {
                        // 管理员
                        if (this.form['key'] == 0) {
                            getUserData(this.form)
                            .then(res => {
                                if (res.data) {
                                    if (res.data.code == 0) {
                                        localStorage.setItem('token', res.data.token)
										localStorage.setItem('identity', res.data.identity)
                                        localStorage.setItem('username', res.data.username)
                                        this.$message({
                                            message: res.msg,
                                            type: 'success'
                                        })
                                        this.$router.push('Home')
                                    }
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    })
									this.loading = false
                                }
                            })
							.catch(err => {this.loading = false})
                        // 医师登录
                        } else if (this.form['key'] == 1) {
                            getDoctorData(this.form)
                            .then(res => {
                                if (res.data) {
                                    if (res.data.code == 0) {
										this.id = res.data.id
                                        localStorage.setItem('token', res.data.token)
                                        localStorage.setItem('username', res.data.username)
										localStorage.setItem('id', res.data.id)
										localStorage.setItem('identity', res.data.identity)
                                        
                                        // 连接socket
                                        this.$socket.connect()
                                        this.$socket.emit('login', { name: res.data.username, img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0159315f8ea34911013f31104bf9b8.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655452050&t=3a93924783fa7287a23f3f75838fe195', flag: '1'}, (result) => {
                                            if (result) {
												const obj = {
													id: this.id,
													state: true
												}
                                                this.$store.commit('setMyInfo', {
                                                    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0159315f8ea34911013f31104bf9b8.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655452050&t=3a93924783fa7287a23f3f75838fe195',
                                                    name: res.data.username
                                                })
                                                this.$store.commit('SET_USER_INFO', {name: res.data.username, flag: 'doctor'})

                                                this.$socket.emit('state', { state: true })
                                                this.$router.push('Home')
                                                this.loading = false
                                                this.$message({
                                                    message: '登录成功',
                                                    type: 'success'
                                                })
												// 更改在线状态
												// changeState(obj).then(res => {
												// 	if (res.data.code === 0) {
												// 		this.$router.push('Home')
												// 		this.loading = false
												// 		this.$message({
												// 			message: '登录成功',
												// 			type: 'success'
												// 		})
												// 	}
												// })
                                            } else {
                                                this.$message({
                                                    message: '用户已在线',
                                                    type: 'warning'
                                                })
												this.loading = false
                                            }
                                        })
                                    }
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    })
									this.loading = false
                                }
                            })
							.catch(err => {this.loading = false})
                        }
                    } else {
                        this.loading = false
                        return false
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .el-row {
        height: 100%;

        .el-col {
            .bg-purple {
                height: 100%;
                background: url(../../assets/login/login.jpg) no-repeat;
                background-size: cover;
                position: relative;

                img {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }

            .bg-purple-light {
                height: 100%;
                padding: 20% 15%;
                box-sizing: border-box;

                h1 {
                    font-weight: normal;
                    text-align: center;
                    padding-bottom: 10%;
                }

                p {
                    padding-bottom: 6%;
                    color: gray;
                }

                .remember {
                    margin-left: 2%;
                    color: dimgray;
                }

                ::v-deep .el-input__inner {
                    height: 50px;
                }

                .btn {
                    width: 100%;
                    height: 50px;
                }
            }
        }
    }
</style>
